import React from 'react'
import {inject, observer} from 'mobx-react';
import {Route, withRouter } from 'react-router-dom';
import {Popover,Tools,SearchBar, Qrcode,Bubble} from 'weaver-mobile';
import { ListPage,RouteLayout } from 'weaver-mobile-page';
import Details from './Details';
import {toJS} from 'mobx';
const getLabel = Tools.getLabel;

@withRouter
@inject ('applicationStore','baseStore')
@observer
class InvoiceAssistant extends React.Component {
    constructor(props){
        super(props);
       
    }

    static defaultProps = {
        prefixCls:"fna-application"
    }    

    componentDidMount() {
        const {applicationStore,baseStore} = this.props;
        const {getbillingAssistantList} = applicationStore;
        const { invoiceCloudInfo,getInvoiceCloudToken } = baseStore;

        if(invoiceCloudInfo.invoiceCloud == undefined){
            getInvoiceCloudToken({},()=>{
                !baseStore.invoiceCloudInfo && getbillingAssistantList();
            });
        }else{
            getbillingAssistantList();
        }
        
        window.addEventListener('message',this.receiver,false);

    }

    componentWillUnmount(){
        window.removeEventListener('message',this.receiver,false)
    }      


    render() {
        const {baseStore,applicationStore} = this.props;
        const {assistantData,incoicesRoute,info} = applicationStore;
        const { invoiceCloudInfo,getInvoiceCloudUrl } = baseStore;

        return (
            <div className={`fna-application`}>
                {invoiceCloudInfo.invoiceCloud === false && 
                    <React.Fragment>
                        <SearchBar
                            className="search-select"
                            placeholder={getLabel(517352,'请输入费用类型名称')}
                            showExtraButton={false}
                            onSubmit={(value)=>this.handleSubmit(value)}
                        />

                        <ListPage.Normal
                            className={'fna-home-listPage fna-qrcode'}
                            showCheck={false}
                            multipleCheck={false}
                            withSwipeAction={true}
                            template={this.getTemplate()}
                            store={assistantData}
                            onRowClick={(data)=>this.getIncoices(data)}
                            
                        />

                        <Route
                            key={incoicesRoute.id}
                            path={incoicesRoute.path}
                            render={() => {
                                return (
                                    <RouteLayout getContainer={() => document.getElementById("root")}>
                                        <div
                                            key="crmListLayout"
                                            className="wm-route-layout"
                                        >
                                            <Details info={info}/>
                                        </div>
                                    </RouteLayout>
                                )
                            }}
                        />
                    </React.Fragment>
                }
                {invoiceCloudInfo.invoiceCloud === true && 
                    <iframe 
                        className='ec-iframe' 
                        src={getInvoiceCloudUrl('invoiceAssistant',6)}
                        style={{width:'100%',height:'100%',border:'0'}}
                        id={'myIframe'}
                    >
                    </iframe>
                }
            </div>
        )
    }

    //获取模板 
    getTemplate = (template) => {
        const {prefixCls} = this.props;
        const newTemplate = {
            default: [
                {
                    key: 'col1',
                    // style: { flex: '0 0 auto'},
                    render: (data) => {
                        let {taxpayerNumber,imgSrc,url,title} = data;
                        return(
                            <div className={`fna-home-template`} key={data.id}>
                                <div className={`fna-home-template-left`}>
                                    <Qrcode text={url} size={70} />
                                </div>
                                <div className={`fna-home-template-middle`}><img src={imgSrc.splitLine} /></div>
                                <div className={`fna-home-template-right`}>
                                    <div>{title}<br />{taxpayerNumber}</div>
                                </div>
                            </div>
                            
                        )
                    }
                },  

                    
            ],
        };

        return newTemplate;
    }

    //提交
    handleSubmit = (value) =>{
        const {applicationStore} = this.props;
        const {getbillingAssistantList} = applicationStore;
        getbillingAssistantList({nameQuery:value})
    }

    //getIncoices
    getIncoices= (data) =>{
        const {applicationStore,history} = this.props;
        const {incoicesRoute,setInfo} = applicationStore;
        setInfo({id:data.id});
        history.push(`${incoicesRoute.path}`)
        
    } 
    
    /* ***********************发票云********************************/
    receiver = (event) =>{
        const {invoiceCloudInfo} = this.props.baseStore;
        if (invoiceCloudInfo.jsUrl != event.origin) return;
        let returnData = event.data;

        if(returnData.type == 'ERROR' && returnData.ret == '-2'){
            this.sendToken();
        } else{
            Bubble.error(returnData.type)
        }

        
    }   
    
    //发送 token
    sendToken = () =>{
        const {baseStore} = this.props;
        const {getInvoiceCloudToken} = baseStore;
        getInvoiceCloudToken({tokenUnusual:1},()=>{
            let childFrame = document.getElementById("myIframe");
            let url = baseStore.invoiceCloudInfo.jsUrl;
            childFrame.contentWindow.postMessage({
                type: 'UPDATE_TOKEN',
                token: baseStore.invoiceCloudInfo.token
                
            }, url); 
        })

    }    


}

export default InvoiceAssistant;